On this episode Cameron Wardzala and I discuss the emergence of style guides and pattern libraries instead of Photoshop comps when building web application and site designs. We also dig into his experience outgrowing bootstrap on a project, new modular CSS frameworks like SMACSS and Atomic Design, and the ongoing debate of Less or SASS.

To subscribe to the podcast, please use the links below:

Click Here to Subscribe via iTunes

Click Here to Subscribe via RSS (non-iTunes feed)

Show Notes:

Cameron's Blog

http://dangerisgo.com/blog/2013/02/14/how-we-grew-out-of-bootstrap/

https://github.com/cwardzala/styleguides/blob/master/styleguides.md

Jekyll

Middleman

Atomic Design

SMACSS

SASS

LESS

http://www.findawayworld.com/

http://www.playaway.com/

http://www.cheezburger.com/

Full Transcript

Craig McKeachie:  On this episode, Cameron Wardzala and I discussed the emergence of style guides and pattern libraries.

[background music]

Craig: Welcome to the "Front-End Developer Cast." The podcast that helps developers be awesome at building ambitious Web applications, whether you're a JavaScript Ninja or you're just getting started. I'm your host, Craig McKeachie.

Hi, everyone. My interview today is with Cameron Wardzala. We discussed the emergence of style guides and pattern libraries instead of Photoshop comps when building Web applications and site designs. We also dig into his experience outgrowing bootstrap on a project, new modular CSS ideas like SMACSS and Atomic Design, and the ongoing debate of Less versus SASS.

Today, I'm lucky to have Cameron Wardzala with me. I'm at a conference and was lucky to meet up with him. I'm noticing this trend in front end style guides that people are creating. Some people are calling them...what's the other word that you hear them called by other things?

Cameron Wardzala: Style guides, pattern libraries. That's pretty much the two that I hear the most.

Craig: That's the other one I hear a lot. Cameron, would you like to introduce yourself?

Cameron: My name is Cameron Wardzala. I work for Findaway and I'm a front- end developer.

Craig: Tell me more, what is a style guide? That seems like a pretty new concept.

Cameron: The concept's been around for quite a while. About 2011 is when they started being spoken about on a regular basis. A style guide is basically a living document of code, of the elements on your site, the style, the elements that you could have on your site.

Craig: Do you see them more for like websites or more for like Web applications? Or is it just a different implementation but the human used for either?

Cameron: In my personal opinion, I see them used for both. I've used them for both. Anytime you have a visual language, something like a style guide is a useful tool.

Craig: When people use the term pattern library, do you think they're talking about something a little bit different? Do they talk about more component type stuff? Is it the same thing or is it just an interchangeable term for you?

Cameron: There are subtle differences. Roughly, they are the same thing. They are pretty interchangeable. But a lot of times when I hear pattern library, it invokes something a little bit more formulaic than a style guide. For me, a style guide is almost like a raw dump of all your style elements. With a pattern library, it almost invokes a feeling of much more purpose, much more thought put into it.

Craig: What is the need that caused people to start creating this? What do you think happened in the world where we used to use Photoshop comps or just build an application without a style guide. Explain to me what's been happening that people are realizing that they need these.

Cameron: The need really arose when people, developers in particular,